/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="share-modal-warp">
        <div class="share-modal__permissions">
            <div class="permissions-label">权限</div>
            <div class="permissions-radiogroup">
                <sf-radio v-model="isPublic" box-label="公开可读" default-disabled :check-value="true" name="isPublic"/>
                <sf-radio v-model="isPublic" box-label="部分可见" :check-value="false" name="isPublic"/>
            </div>
        </div>
        <div v-if="!isPublic" class="share-modal__person">
            <div class="person-label">分享人</div>
            <div class="person-body">
                <sf-select ref="select"
                           v-model="userSelectList"
                           :options="userList"
                           :default-width="360"
                           :default-height="32"
                           searchable
                           show-all-tag
                           :allow-blank="false"
                           show-check-all
                           type="multi"/>
                <div class="person-body__opt">
                    <link-btn ref="hoverLink">{{ ROLES_MAP[role] }} <i
                        class="sf-comp-iconfont icon-comp-arrow-down-big"></i></link-btn>
                    <sf-menu anchor="bottom" default-target="hoverLink">
                        <sf-menu-item @click="changeRole('reader')">
                            <lang>只读</lang>
                        </sf-menu-item>
                        <sf-menu-item @click="changeRole('updater')">
                            <lang>读写</lang>
                        </sf-menu-item>
                    </sf-menu>
                </div>
                <sf-button-primary :loading="isLoad" @click="share">分享</sf-button-primary>
            </div>
        </div>
        <div v-if="!isPublic" class="share-modal__table">
            <div class="table-label">已分享的</div>
            <div class="table-warp">
                <sf-table ref="table" :options="tableOption" :default-height="250">
                    <sf-table-column data-index="username" :default-width="40">
                        <lang>用户名</lang>
                    </sf-table-column>
                    <sf-table-column data-index="roleName" :default-width="40">
                        <lang>权限</lang>
                    </sf-table-column>
                    <template slot="roleName" slot-scope="{value}">
                        {{ ROLES_MAP[value] }}
                    </template>
                    <sf-table-column data-index="opr" :default-width="40">
                        <lang>状态</lang>
                    </sf-table-column>
                    <template slot="opr" slot-scope="{record}">
                        <link-btn @click="deleteUser(record)">删除</link-btn>
                    </template>
                </sf-table>
            </div>
        </div>
    </div>
</template>

<script>
import LinkBtn from 'src/components/link_btn';

const ROLES_MAP = {
    'reader': _('只读'),
    'updater': _('读写'),
}

export default {
    components: {
        LinkBtn
    },
    data() {
        return {
            isLoad: false,
            data: {},
            isPublic: false,
            username: '',  // 用户名
            dataspace: '', // 数据空间名称
            dataset: '',
            role: 'reader',
            userSelectList: [],
            tableOption: {
                data: [],
                border: true,
                selectionHide: true,
                
            }
        }
    },
    computed: {
        userList() {
            return (this.data.users || []).map(item => ({label: item, value: item}))
        },
        ROLES_MAP() {
            return ROLES_MAP;
        }
    },
    watch: {
        data: {
            handler() {
                this.$refs.table.loadData(this.data.list || [])
            },
            deep: true
        }
    },
    methods: {
        async updateData() {
            const {success, data, msg} = await this.$ajax.get(`/ai-datalake/api/v1/shared-datasets`, {
                username: this.username,  // 用户名
                dataspace: this.dataspace, // 数据空间名称
                dataset: this.dataset,  // 数据集名称
                resourceType: "dataset"
            });
            if (!success) {
                this.$showErr(msg);
                return;
            }
            this.data = data;
            this.userSelectList = [];
            this.$nextTick().then(() => {
                this.$refs.select?.clearInvalid()
            })
        },
        changeRole(role) {
            this.role = role
        },
        async share() {
            if (!this.$refs.select.validate()) {
                return;
            }
            const grantUserRoles = {};
            this.userSelectList.forEach(item => {
                grantUserRoles[item] = this.role;
            })
            const params = {
                resourceType: 'dataset',
                resourceName: `${this.dataspace}/${this.dataset}`,
                isPublic: this.isPublic,
                grantUserRoles: grantUserRoles
            }
            this.isLoad = true;
            const {success, msg} = await this.$ajax.post('/permission/api/v1/data_auth', params)
            this.isLoad = false;
            if (!success) {
                this.$showErr(msg)
            }
            // this.$ok(_('分享成功'))
            this.updateData()
        },
        async deleteUser(record) {
            const params = {
                username: record.username,
                dataspace: this.dataspace,
                dataset: this.dataset,
                resourceType: record.roleName,
            }
            const {success, msg} = await this.$ajax.delete('/permission/api/v1/data_auth/shared', params)
            if (!success) {
                this.$showErr(msg)
            }
            this.updateData()
            
        }
    }
}
</script>

<style scoped lang="less">
.share-modal-warp {
    padding: 0 20px;
    
    .share-modal {
        &__permissions {
            .permissions-label {
                margin-bottom: 8px;
                font-size: 12px;
                font-weight: normal;
                line-height: 17px;
                color: #3D3D3D;
            }
            
            .permissions-radiogroup {
                .sfv-radio + .sfv-radio {
                    margin-left: 32px;
                }
            }
        }
        
        &__person {
            margin-top: 24px;
            
            .person-body {
                margin-top: 8px;
                display: flex;
                align-items: center;
                
                &__opt {
                    margin-left: 16px;
                    
                    .link-btn {
                        margin-right: 16px;
                    }
                }
            }
            
            
        }
        
        &__table {
            margin-top: 16px;
            
            .table-label {
                margin-bottom: 8px;
            }
        }
    }
}
</style>
